作为世界上使用最广泛的JavaScript库,jQuery曾经帮助过一代开发人员创建了适用于每种浏览器的网站,可以说,Web开发之所以能有今天,jQuery可谓功不可没。但是随着新的库、框架和范例的不断涌现,jQuery作为Web开发首选工具的地位已经逐渐不保......任何事物都有其自身发展的兴盛与衰落,短期内jQuery并不会消失,但是对于其来说,又该如何维稳逆袭呢?作者 | Danny Guo
译者 | 弯月,责编 | 刘静
出品 | CSDN(ID:CSDNnews)
jQuery是世界上使用最广泛的JavaScript库。2000年末的时候,Web开发社区大力推崇jQuery,他们利用jQuery打造了由大量网站、插件和框架组成的生态系统。但在过去的几年中,jQuery作为Web开发首选工具的地位已经不保。在本文中,让我们一起来看看为什么jQuery流行了起来,后来又是什么原因导致它有点失宠,以及我们何时仍然应该选择jQuery创建现代网站。
jQuery的发展简史
2005年,John Resig开发了第一版的jQuery,并于2006年在一次名为BarCampNYC的活动中发布。他曾在最早的jQuery网站上写道:jQuery是一个Javascript库,它永远铭记自己的使命:编写Javascript代码是一件有趣的事情。为了实现这个目标,jQuery剥离了所有不必要的标记,通过简化、聪明且易于理解的方式来执行常见的重复性任务。jQuery有两个主要的价值主张:第一,提供高效的API方便操作网页。特别是,它提供了强大的选择元素的方法。除了通过id或类选择元素之外,jQuery还允许使用复杂的表达式,例如根据它们与其他元素的关系选择元素:
// Select every item within the list of people within the contacts element
$('#contacts ul.people li');
这个选择引擎最终单独抽象成了一个名为Sizzle的库。
第二个卖点是,浏览器之间差异的抽象。当时,很难编写出可以在所有浏览器上稳健运行的代码。
由于缺乏标准化,开发人员必须考虑许多不同的浏览器行为和边缘情况。只需看看早期的jQuery源代码,然后搜索jQuery.browser就可以看到这类的例子,如下所示:// If Mozilla is usedif ( jQuery.browser == "mozilla" || jQuery.browser == "opera" ) {
// Use the handy event callback
jQuery.event.add( document, "DOMContentLoaded", jQuery.ready );// If IE is used, use the excellent hack by Matthias Miller// http://www.outofhanwell.com/blog/index.php?title=the_window_onload_problem_revisited} else if ( jQuery.browser == "msie" ) {
// Only works if you document.write() it
document.write("<scr" + "ipt id=__ie_init defer=true " +
"src=javascript:void(0)></script>");
// Use the defer script hack
var script = document.getElementById("__ie_init");
script.onreadystatechange = function() {
if ( this.readyState == "complete" )
jQuery.ready();
};
// Clear from memory
script = null;// If Safari is used} else if ( jQuery.browser == "safari" ) {
// Continually check to see if the document.readyStjQuery出现以后,开发人员就可以依赖jQuery团队来处理这些陷阱。
后来,开发人员在jQuery的帮助下,可以更容易地采用更复杂的技术,比如动画和Ajax。逐渐地, jQuery成为了各个网站的标准依赖。时至今日, 互联网的很大一部分依然构建在jQuery上。根据 W3Techs的估计,大约有74%的网站仍在使用jQuery。jQuery的管理工作也越来与正规。2011年,jQuery团队正式创建了jQuery委员会。2012年, jQuery委员会成立了jQuery基金会。2015年,jQuery基金会与Dojo基金会合并,组建了JS基金会。后来,2019年又与Node.js 基金会合并,组建了OpenJS基金会——jQuery是其“最具影响力的项目”之一。
然而,近年来jQuery的受欢迎程度有所下降。GitHub的网站前端不再使用jQuery,而Bootstrap v5也放弃了jQuery,因为它是Bootstrap“客户端常规JavaScript最大的依赖”(目前压缩后是30KB)。Web开发的一些趋势削弱了jQuery作为必选工具的地位。
由于多种原因,浏览器差异和限制也没有那么显著了。首先是标准化有所改进。主流浏览器供应商(苹果、谷歌、微软和Mozilla)成立了Web超文本应用技术工作组,并合作开发了Web标准。虽然浏览器在很多重要方面仍然存在差异,但各家供应商总有办法共同发展,避免无休止的战争。因此,浏览器的API日益强大。例如,Fetch API可以取代jQuery的Ajax函数:
$.getJSON('https://api.com/songs.json')
.done(function (songs) {
console.log(songs);
})
fetch('https://api.com/songs.json')
.then(function (response) {
return response.json();
})
.then(function (songs) {
console.log(songs);
});
querySelector和querySelectorAll方法也可以取代jQuery的选择功能:
const fooDivs = $('.foo div');
const fooDivs = document.querySelectorAll('.foo div');
如今我们还可以使用classList操作元素的类:
$('#warning').toggleClass('visible');
document.querySelector('#warning').classList.toggle('visible');
这个网站(http://youmightnotneedjquery.com/)列出了几种可以用原生代码替换jQuery代码的情况。有些开发人员还是喜欢使用jQuery,因为他们不知道可以利用哪些API,但是随着开发人员对API越来越熟悉,他们对jQuery的依赖性就会降低。使用原生功能还可以提高网页的性能。而且如今你还可以使用CSS更有效地实现许多jQuery的动画效果。第二个原因是浏览器的更新速度比过去更快。如今,除了苹果的Safari之外,大多数浏览器都有"Evergreen"的更新策略。这些浏览器可以在没有用户干预的情况下悄悄更新,而且不依赖于操作系统的更新。这意味着用户可以更快地获得浏览器的新功能和错误修复,开发人员不必等待Can I Use网站上给出的使用百分比达到可接受的水平。他们可以毫无顾虑地使用新功能和API,而且还无需加载jQuery或polyfill。第三个原因是Internet Explorer的边缘化。一直以来,Web开发人员都对IE深恶痛绝。有些IE的bug是人尽皆知的,而且因为IE浏览器是2000年的主流浏览器,其缺乏"Evergreen"更新,很多人还在使用旧版本。而微软的做法更是加快了人们放弃IE的速度,他们于2016年后放弃了对IE 10及以下版本的支持,并将IE 11作为最后一个支持的版本。Web开发人员忽视IE兼容性的现象越来越普遍。2013年,甚至是jQuery发布的版本2.0时也放弃了对IE 8及以下版本的支持。虽然有些遗留网站等特殊情况仍然需要IE,但使用IE的人越来越少了。
自jQuery发布以来,Web开发涌现了大量Web框架,目前处于主流地位的是React、Angular和Vue。与jQuery相比,这些框架拥有两大显著优势。首先,它们可以轻松地将UI分解为组件。这些框架旨在处理页面的呈现以及页面的更新。而 jQuery通常仅用于更新页面,最初的页面则需要服务器提供。另一方面,React、Angular和Vue组件支持HTML、代码甚至CSS之间的紧密耦合。就像我们将代码库分解成多个独立的函数和类一样,这些框架可以将UI分解为可重用的组件,如此一来构建和维护复杂的网站就更加容易了。第二个优点是,这些新出现的框架鼓励声明式范例,开发人员只需描述UI应有的样子,至于怎样实现则留给框架去处理。这种方法与jQuery代码中命令式的方法形成鲜明对比。使用jQuery的时候,你需要明确地编写修改的步骤。但在使用声明式框架时,你只需指明:“利用这些数据,实现这样的用户界面。”这样即使记不住纷繁芜杂的代码也可以写出没有bug的代码了。开发人员都喜欢通过这些新方法来构建网站,因此对jQuery的关注度就下降了。如果你估计项目的复杂度会很高,那么最好还是采用其他的库或框架,因为这样更加有助于处理这种复杂性,例如将UI分解成组件等。对于这样的网站来说,刚开始的时候使用jQuery还可以,但是很快就会变得混乱不堪,你甚至不确定哪些代码会影响页面的哪些部分。我之前就遇到过这样的问题,每当你想修改代码时,心里就会隐隐地不安。由于jQuery选择器依赖于服务器生成的HTML结构,因此很难确定修改代码时不会破坏其他功能。另一方面,有时候你的网站只需要少量交互或动态的内容。然而,即便是在这些情况下,我仍然不推荐使用jQuery,因为现在我们可以利用原生API实现很多功能。即便我确实需要更强大的功能,我也会寻找特定的库,例如利用axios实现Ajax,或通过Animate.css实现动画。在这些情况下,使用这样的库通常比加载整个jQuery(只为了一些功能)更轻便。我认为我们使用jQuery的理由在于,它提供的功能很全面,可以为网站的前端提供全面的支持。你不必学习各种的原生API或专用库,只需阅读jQuery文档就可以立即提高工作效率。jQuery的命令式方法不利于扩展,但比其他库的声明式方法更直接。对于范围非常有限的网站来说,采用jQuery开发还是很合理的,因为它不需要任何复杂的构建或编译过程。此外,如果你很确信网站的复杂度不会增加,而且你也不想使用原生功能,那么jQuery是一个不错的选择,因为原生的功能肯定比同等的jQuery代码更冗长。还有一种情况:你必须支持旧版本的IE。在这种情况下,jQuery可以处理好占主导地位的IE浏览器。
短期内jQuery并不会消失。jQuery还在积极地发展中,尽管我们有很多原生方法,而许多开发人员也更喜欢使用原生的API。jQuery曾经帮助过一代开发人员创建适用于每种浏览器的网站。虽然如今jQuery的很多方面已经被新的库、框架和范例所取代,但Web开发之所以能有今天,jQuery可谓功不可没。除非jQuery的功能发生重大变化,否则在未来几年内,jQuery的使用率可能会继续缓慢但稳定地下降。新网站都会倾向于采用更现代的框架构建,适合采用jQuery的情况会越来越少。对有些人来说,Web开发工具的流失率让人有点痛心,但对我来说,这是一个快速进步的标志。jQuery为Web开发带来了更好的方式。而它之后的后起之秀也在朝着这个方向努力。原文链接:https://blog.logrocket.com/the-history-and-legacy-of-jquery/【END】
热 文 推 荐
点击阅读原文,即刻阅读《程序员大本营》最新期刊。